<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view
      style="display: flex; align-items: center; width: 100%; box-sizing: border-box; position: fixed; top: 0; left: 0; padding-left: 30rpx; z-index: 99; background-color: #fff"
      :style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }"
    >
      <uni-icons type="left" size="20" @click="goback"></uni-icons>
      <view style="display: flex; align-items: center">
        <view style="font-weight: bold; font-size: 36rpx; color: #151515; padding-left: 200rpx">群成员({{ list.length }})</view>
      </view>
    </view>
    <!-- 站位盒子 -->
    <view :style="{ height: navheight + 'px', width: '100%' }"></view>
    <view class="body" style="background-color: #fff">
      <!-- 群成员 -->
      <view class="chengyuan" style="padding-top: 30rpx">
        <!-- 头像昵称 -->
        <view class="picture" style="width: 108rpx; text-align: center; margin-left: 35rpx; margin-bottom: 40rpx; display: inline-block" v-for="(item, index) in list" :key="index">
          <view style="position: relative; top: 0; left: 0">
            <image :src="$getimgsrc(item.user.avatar)" style="width: 108rpx; height: 108rpx; display: block; border-radius: 50%"></image>
            <view
              style="
                position: absolute;
                bottom: 0;
                left: 0;
                width: 108rpx;
                height: 30rpx;
                border-radius: 20rpx;
                background-color: aquamarine;
                color: #fff;
                font-size: 26rpx;
                text-align: center;
                line-height: 30rpx;
              "
              v-if="item.style == 1 || item.style == 2"
            >
              {{ item.style == 1 ? '群管理' : '群主' }}
            </view>
          </view>
          <text style="display: block; width: 100%; font-size: 24rpx; color: #666666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
            {{ item.user.nickname }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hometop: '',
      navheight: '',
      id: null,
      morecaozuo: true,
      iskeybord: false,
      list: []
    };
  },
  onLoad(data) {
    this.id = data.id;
    const app = getApp();
    this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
    this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
    this.getGroupUserList();
  },
  methods: {
    goback() {
      uni.navigateBack();
    },
    // 群成员列表
    getGroupUserList() {
      this.http('/group/getGroupUserList', {
        group_id: this.id
      }).then((res) => {
        this.list = res.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
